<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--引入基础库-->
		<link rel="stylesheet" href="../../css/wm-ui.css" />
		<script type="text/javascript" src="../../js/wm-ui.js" ></script>
		
		<!--引入loginForm组件-->
		<script type="text/javascript" src="../../_src/com.login/login.js"></script>
		<title>登录</title>
		<style>
			body{ padding: 0px; margin: 0px;}
			.container-fluid{ min-height: 100vh;}
			.login-form{ position: absolute; width: 500px; height: 400px; padding: 50px; margin: auto; left: 0; top: 0; right: 0; bottom:0; background: #f1f3f7; background:rgba(241,243,247,0.9);};
			.form-control{background:#ffffff;}
			.bg{position:fixed; width: 100vw; height: 100vh; top:0;}
			.bg li{ list-style: none; position: absolute; width: 100%; height: 100%; opacity: 0; transition: 1s all;}
			.bg li.current{opacity: 1;}
			.bg img{ width: 100%; height: 100%;}
			.bottom-text{ position: absolute; color: #ffffff; left: 0; top: 50%; width: 100%; margin-top: 230px; font-size: 16px;}
		</style>
	</head>

	<body>
		<div class="bg">
			<li><img src="images/login-bg1.jpg"></li>
			<li><img src="images/login-bg2.jpg"></li>
			<li><img src="images/login-bg3.jpg"></li>
		</div>
		<div class="pos-abs bottom-text text-center init">
			<p>Be considerate and warm</p>
			<p>知人意，暖人心</p>
		</div>
		
		<div class="container-fluid pos-rel">
			<div class="login-form has-shadow">
				<h2 class="text-center mb30">未名信息后台管理系统</h2>
				<div id="loginForm"></div>
			</div>
		</div>
		<script>
			(function(){
				$("#loginForm").loginForm({
					//loginUrl:"index.html",//表单提交方式提交地址
					loginApi:"userinfo.json",//接口提交方式接口地址
					codeImgUrl:"http://117.78.43.21:8080/hjyt/gngl/yzmsz.do",//验证码图片地址
					userLabelText:"用户名",//用户名标题
					passLabelText:"密码",//密码标题
					codeLabelText:"验证码",//验证码标题
					//verifyCodeApi:"http://111.204.164.42:9090/loginUser/imgCheckCode.do",//验证验证码接口
					//verifyUserApi:"",//验证用户名是否正常接口，非正常需要验证码
				})
				$.fn.slider = function(options){
					options = $.extend({
						type:"fade",
						element:"li",
						time:4000,
						nav:false,
					},options)
					var $container = $(this);
					var num = $container.children(options.element).length;
					$container.find(options.element).eq(0).addClass("current");
					if(num>1){
						var current = 0,si;
						interval();
						if(options.nav){
							options.nav.eq(0).addClass("current")
							options.nav.on("click",function(){
								clearInterval(si)
								$container.find(options.element)./*fadeOut().*/removeClass("current");
								current = options.nav.index($(this))
								options.nav.removeClass("current").eq(current).addClass("current")
								$container.find(options.element).eq(current)./*fadeIn().*/addClass("current");
								interval();
							})
						}
						function interval(){
							si = setInterval(function(){
								$container.find(options.element)./*fadeOut().*/removeClass("current");
								if(current<num-1){
									$container.find(options.element).eq(++current)./*fadeIn().*/addClass("current");
								}else{
									$container.find(options.element).eq(0)./*fadeIn().*/addClass("current");
									current = 0;
								}
								if(options.nav){
									options.nav.removeClass("current").eq(current).addClass("current")
								}
							},options.time);
						}
					}
				}
			})();
			$(".bg").slider()
		</script>
	</body>

</html>
